<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:p="http://primefaces.org/ui"
		xmlns:appcc="http://java.sun.com/jsf/composite/components"
		contentType="text/html" 
	template="/WEB-INF/layouts/main.xhtml"
	encoding="UTF-8" lang="${userContext.locale}">
	<ui:define name="popup">
		<p:dialog id="welcomeDialog" header="#{messages['main.content.popup.message.header']}" modal="true" height="370" width="500"
			widgetVar="welcome" visible="true" rendered="#{not homeUtil.cookieExist('hideHomeDialog')}">  
			<h:form>
	    		<h:outputText value="#{messages['main.content.popup.message']}" escape="false"/> <br/>
	    		<p:panel styleClass="blank" style="float:right;">	    		
		    		<p:selectBooleanCheckbox value="#{homeUtil.doNotShowThisPopupAgain}">
		    			<p:ajax event="valueChange" listener="#{homeUtil.hideHomeDialog}" 
		    				oncomplete="welcome.hide();"></p:ajax>
		    		</p:selectBooleanCheckbox>
		    		<h:outputText value="#{messages['main.message.neplusafficher']}" style="color:white;"/>  
		    	</p:panel>	
    		</h:form>
		</p:dialog>  
	</ui:define>
	<ui:define name="content">
		<script type="text/javascript">
	       	function changeCountryColor(){
	              jQuery('.trjdk-main-banner-content-subscription-list').css('color','#333');
	        }
	       	jQuery(function () {
	       		jQuery('.trjdk-main-banner-content-subscription-list').css('font-size','20px');
	       	});
	       	function suivant() {
	       		jQuery('.trjdk-main-content-subscription-form').effect("bounce", {times:2});
	       	}
    	</script>
    	
		<h:panelGrid columns="2" columnClasses="alignLeft, alignRight">
			<div class="trjdk-main-content-subscription-logoarabic">
				<center>
					<img src="${request.contextPath}/resources/img/logo_arabic.png" />
				</center>
			</div>
			<p:panel styleClass="trjdk-main-content-subscription">
				<h:panelGrid columns="1" width="400">
				
					<p:panel styleClass="blank" style="width:350px; text-align:center"
						rendered="#{subscription.step1}"> 
						<h:outputText value="#{messages['main.content.subscription.welcome']}" styleClass="customeText" />
					</p:panel>
					
					<p:panel styleClass="blank" id="subscriptionPanel"> 
						 
						<!-- Inscription -->
						<h:form id="subscription" >
							<p:messages id="messagesHome" showDetail="true" autoUpdate="true" closable="true" /> 
							<h:panelGrid columns="3" styleClass="trjdk-main-content-subscription-form" 
								rendered="#{subscription.step1}">
								
								<!-- Prénom -->
								<p:inputText id="prenom" styleClass="trjdk-main-banner-content-subscription-inputText"
									value="#{subscription.criteria.prenom}" required="true"
									label="#{messages['main.content.subscription.prenom']}" />
								<p:watermark for="prenom" value="#{messages['main.content.subscription.prenom']}" />
								<p:message display="icon" for="prenom"/>  
								
								<!-- Date de naissance -->
								<p:calendar locale="fr" showButtonPanel="true" navigator="true" id="dateNaissance" 
									styleClass="trjdk-main-banner-content-subscription-calendar"
									value="#{subscription.criteria.dateDeNaissance}" required="true"
									label="#{messages['main.content.subscription.dateDeNaissance']}"/>
								<p:watermark for="dateNaissance" value="#{messages['main.content.subscription.dateDeNaissance']}" />
								<p:message display="icon" for="dateNaissance"/>  
								
								<!-- Pays -->
								<p:selectOneMenu effect="fade" id="pays" value="#{subscription.criteria.pays}"
									styleClass="trjdk-main-banner-content-subscription-list" required="true" onchange="changeCountryColor();"
									label="#{messages['main.content.subscription.pays']}" converter="#{paysConverter}">  
									<f:selectItem itemLabel="#{messages['main.content.subscription.pays']}" itemValue=""/>  
		            				<f:selectItems value="#{paysUtil.getAllPays()}" var="pays" itemLabel="#{pays.libelle}" 
		            					itemValue="#{pays}"/>    
								</p:selectOneMenu>
								<h:panelGroup></h:panelGroup>
								<p:message display="icon" for="pays"/>  
								
								<!-- Adresse électronique -->
								<p:inputText id="email1" styleClass="trjdk-main-banner-content-subscription-inputText" 
									value="#{subscription.criteria.email1}" required="true"
									label="#{messages['main.content.subscription.adresseElectronique']}"/>
								<p:watermark for="email1" value="#{messages['main.content.subscription.adresseElectronique']}" />
								<p:message display="icon" for="email1"/>  
								
								<!-- Mot de passe -->
								<p:password id="mdp1" styleClass="trjdk-main-banner-content-subscription-inputText"
									value="#{subscription.criteria.motDePasse1}" required="true"
									label="#{messages['main.content.subscription.mdp']}"/>
								<p:watermark for="mdp1" value="#{messages['main.content.subscription.mdp']}" />
								<p:message display="icon" for="mdp1"/>  
								
								<!-- Nous rejoindre -->
								<h:commandButton value="${messages['main.content.subscription.nousrejoindre']}" 
									styleClass="trjdk-main-banner-content-subscription-button" style="float:right"
									action="#{subscription.validate}">
								</h:commandButton>	
							</h:panelGrid>
						</h:form>	
						
						<!-- Confirmation -->		
						<h:form id="confirmation">
							<h:panelGrid columns="3" styleClass="trjdk-main-content-subscription-form" 
								id="subscriptionStep2" rendered="#{subscription.step2}">
								
								<!-- Confirmer l'adresse électronique -->
								<p:inputText id="email2" styleClass="trjdk-main-banner-content-subscription-inputText" 
										value="#{subscription.criteria.email2}" required="true"
										label="#{messages['main.content.subscription.adresseElectronique2']}"/>
								<p:watermark for="email2" value="#{messages['main.content.subscription.adresseElectronique2']}" />
								<p:message display="icon" for="email2"/>  	
								
								<!-- Confirmer le mot de passe -->
								<p:password id="mdp2" styleClass="trjdk-main-banner-content-subscription-inputText"
										value="#{subscription.criteria.motDePasse2}" required="true"
										label="#{messages['main.content.subscription.mdp2']}"/>
								<p:watermark for="mdp2" value="#{messages['main.content.subscription.mdp2']}" />
								<p:message display="icon" for="mdp2"/>  
								
								<p:panel styleClass="blank" >
								
									<h:panelGroup style="float:right">
										<!-- Retour -->
										<h:commandButton value="${messages['main.subscription.mail.confirmation.retour']}" 
												styleClass="trjdk-main-banner-content-subscription-button" onclick="changeCountryColor();"
												action="#{subscription.retourStep1}" immediate="true"/>		
										<p:spacer width="5"/>	
										<!-- S'inscrire -->
										<h:commandButton value="${messages['main.content.subscription.inscrire']}" 
												styleClass="trjdk-main-banner-content-subscription-button" 
												action="#{subscription.inscription}" />
									</h:panelGroup>			
								</p:panel>
							</h:panelGrid>
						</h:form> 
						
						<!-- Validation par email-->
						<h:form id="validation">
							<p:panel rendered="#{subscription.step3}"
								id="subscriptionStep3" styleClass="blank trjdk-main-content-subscription-form">
								<h:outputText value="#{messages['main.subscription.mail.confirmation.inscription1']}" styleClass="customeText" />
								<p>
									<h:outputText value="#{messages['main.subscription.mail.confirmation.inscription2']}" escape="false"/>
								</p>	
								
								<!-- Retour -->
								<h:commandButton value="${messages['main.subscription.mail.confirmation.retour']}" 
										styleClass="trjdk-main-banner-content-subscription-button" style="float:right"
										action="#{subscription.retour}" />
							</p:panel>
						</h:form>
					</p:panel>
					<p:panel styleClass="blank" style="width:350px; text-align:center" rendered="#{subscription.step1}">
						<h:outputText value="#{messages['main.content.statistiques']}" styleClass="customeText"/>
					</p:panel>	
					<p:panel styleClass="blank" rendered="#{subscription.step1}">
						<p:media value="http://www.youtube.com/v/lzIMEUc41uI" width="350" height="315" player="flash"/>
					</p:panel>
				</h:panelGrid>
			</p:panel>
		</h:panelGrid>
	</ui:define>
</ui:composition>